<template>
	<div class="app">
        <myNavbar title="退款详情"></myNavbar>
		<list>
			<cell>
				<div class="refund_details_status">
					<text class="refund_details_status_title">{{detailsForm.statusDescr}}</text>
					<text v-if="detailsForm.statusDescr == '待确认'" class="refund_details_status_subtitle">等待卖家确认退货申请</text>
					<text v-if="detailsForm.statusDescr == '待退货'" class="refund_details_status_subtitle">商家已同意退货申请,请尽早寄回退货</text>
					<text v-if="detailsForm.statusDescr == '已寄回'" class="refund_details_status_subtitle">商品已寄回,商家收到货后待尽快安排退款</text>
					<text v-if="detailsForm.statusDescr == '待退款'" class="refund_details_status_subtitle">商家已经收到退货，款项将原路退回您的账户</text>
					<text v-if="detailsForm.statusDescr == '已退款'" class="refund_details_status_subtitle">退款已完成。</text>
					<text v-if="detailsForm.statusDescr == '已关闭'" class="refund_details_status_subtitle">因您撤消退款申请，退款已关闭，交易将正常进行</text>
				</div>
				<div class="details_why">
					<text class="details_why_title">当前状态</text>
					<div class="details_information_content" v-for="(item,index) in orderLog">
						<div class="details_information_left">
							<div :class="[index == 0 ?'details_information_round_current':'details_information_round']">
								<text v-if="item.type==1" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe606;</text>
								<text v-if="item.type==2" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe66e;</text>
								<text v-if="item.type==3" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe614;</text>
								<text v-if="item.type==4" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe66e;</text>
								<text v-if="item.type==5" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe69f;</text>
								<text v-if="item.type==6" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe66e;</text>
								<text v-if="item.type==7" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe664;</text>
							</div>
							<div v-if="index+1 != orderLog.length" :class="[index == 0?'details_information_line_current':'details_information_line']"></div>
						</div>
						<div class="details_information_text">
							<text :class="[index==0?'details_information_title_current':'details_information_title']">{{item.content}}</text>
							<text :class="[index==0?'details_information_title_current':'details_information_title']">{{item.createDate}}</text>
						</div>
					</div>
				</div>
				<div class="details_why">
					<text class="details_instructions_name">补充说明</text>
					<text class="details_instructions_title">商家同意或者超时未处理，系统将自动退款给您。</text>
					<text class="details_instructions_title">如果商品已经出库，商家将拒绝您的申请，退款申请关闭。您可以在收到商品后重新发起退款。</text>
					<div class="details_instructions_botton">
						<div class="details_instructions_botton_left" v-if="detailsForm.status ==0 || detailsForm.status ==1" @click="cancelClick">
							<text class="details_instructions_botton_leftTitle">撤销申请</text>
						</div>
						<div class="details_instructions_botton_right botton_bd_color" @click="logisticsClick" v-if="detailsForm.status ==1">
							<text class="details_instructions_botton_rightTitle botton_bd_fz_color">我已寄出 (填写物流单号)</text>
						</div>
						<div class="details_instructions_botton_right botton_bd_color" @click="toViewClick" v-if="detailsForm.status ==2 || detailsForm.status ==3">
							<text class="details_instructions_botton_rightTitle botton_bd_fz_color">查看物流</text>
						</div>
					</div>
				</div>
				<div class="details_product">
					<text class="details_product_title">退款信息</text>
					<div class="details_product_content" v-for="item in detailsForm.itemList">
						<div class="details_product_content_img">
							<image :src="item.thumbnail" style="width:120px;height:120px"></image>
						</div>
						<div class="details_product_column">
							<text class="details_product_content_title">{{item.name}}</text>
							<text class="details_product_content_subtitle">{{item.spec}}</text>
						</div>
					</div>
					<div class="details_product_row">
						<text class="details_product_row_title">退款原因</text>
						<text class="details_product_row_subtitle">{{detailsForm.reason}}</text>
					</div>
					<div class="details_product_row" v-if="detailsForm.subPoint >0">
						<text class="details_product_row_title">兑换券</text>
						<text class="details_product_row_subtitle">¥{{detailsForm.subPoint}}</text>
					</div>
          <div class="details_product_row" v-else>
            <text class="details_product_row_title">退款金额</text>
            <text class="details_product_row_subtitle">¥{{detailsForm.amountPayable}}</text>
          </div>
					<div class="details_product_row">
						<text class="details_product_row_title">申请时间</text>
						<text class="details_product_row_subtitle">{{detailsForm.createDate}}</text>
					</div>
					<div class="details_product_row">
						<text class="details_product_row_title">退款编号</text>
						<text class="details_product_row_subtitle">{{detailsForm.sn}}</text>
					</div>
				</div>
				<div class="details_product_files" v-if="files.length !=0">
					<text class="details_product_title_files">退款凭证</text>
					<div class="files_box">
						<div v-for="item in files" v-if="item.fileName == 'fileImg'">
							<div class="files_item">
								<image style="width:200px;height:200px" :src="item.fileUrl"></image>
							</div>
						</div>
						<div v-for="item in files" v-if="item.fileName == 'fileVideo'">
							<div class="files_item">
                                <video class="image" :play-status="state" :src="item.fileUrl" autoplay controls
                                       @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
							</div>
						</div>
					</div>
				</div>
				<div class="details_product" v-if="detailsForm.memo !=underfind">
					<text class="details_product_title">退款备注</text>
					<div class="details_product_row">
						<text style="font-size:32px;font-weight:700;color:rgba(26,26,30,1);letter-spacing:2px">{{detailsForm.memo}}</text>
					</div>
				</div>
				<div style="width:100%;height:50px"></div>
			</cell>
		</list>
	</div>
</template>

<script>
	import {
		find,
		cancel
	} from '../../../api/askfor';
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
	const storage = weex.requireModule('storage')
	const modal = weex.requireModule('modal')
	export default {
		data() {
			return {
				id: '',
				detailsForm: {},
				orderLog: [],
				files: [],
                state: 'pause',
			}
		},
		created() {
			this.initIconFont()
			this.id = eeui.getPageInfo('orderRefund').params
		},
        components:{
		  myNavbar
        },
		mounted() {
			this.findClick()
		},
		methods: {
			logisticsClick() {
				var _this = this
				eeui.openPage({
						pageName: 'refundDetails',
						params: this.id,
						url: 'root://pages/member/order/logistics.js',
                        statusBarType: 'immersion',
                        statusBarStyle:false
					},
					(result) => {
                        if (result.status == 'stop') {
                            _this.findClick(_this.id)
                        }
                    }
				);
			},
			findClick() {
				var _this = this
				find(_this.id).then(
					res => {
					    console.info(res)
						if (res.type == 'success') {
							_this.detailsForm = res.data.askfor
							_this.detailsForm.createDate = _this.formatTime(_this.detailsForm.createDate)
							_this.orderLog = res.data.askforLog
							if (!this.isEmptyString(_this.orderLog)) {
								_this.orderLog.forEach(function(item) {
									item.createDate = _this.formatTime(item.createDate)
								})
							}
							_this.detailsForm.itemList.forEach(function(item) {
								item.thumbnail = _this.thumbnail(item.thumbnail, 120, 120)
							})
							_this.files = res.data.files
						}
					}
				).catch(error => {
					console.log(error)
				})
			},
			cancelClick() {
				var _this = this
				eeui.confirm({
					title: "提示?",
					message: "是否确认取消？",
					buttons: ["取消", "确定"]
				}, function(result) {
					if (result.status == "click" && result.title == "确定") {
						cancel(_this.id).then(
							res => {
								if (res.type == 'success') {
									eeui.toast(res.content)
									eeui.closePage();
									storage.removeItem('order', event => {

									})
								}
							}
						).catch(error => {
							console.log(error)
						})
					}
				});
			},
			toViewClick() {
				var _this = this
				eeui.openPage({
						pageName: 'refundDetails',
						params: this.id,
						url: 'root://pages/member/order/logisticsList.js',
                        statusBarType: 'immersion',
                        statusBarStyle:false
					},
					(result) => {

					}
				);
			},
            onstart (event) {
                this.state = 'onstart'
            },
            onpause (event) {
                this.state = 'onpause'
            },
            onfinish (event) {
                this.state = 'onfinish'
            },
            onfail (event) {
                this.state = 'onfinish'
            },
		}
	}
</script>
<style lang="css" src="../../../style/wx.css" />
<style scoped>
    .app, body {
        background-color: rgba(248, 248, 248, 0.8);
    }
    .app{
        flex: 1;
    }
    .refund_details_status {
        width: 700px;
        /* height: 168px; */
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        margin-top: 20px;
        padding: 40px 25px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

    .refund_details_status_title {
        font-size: 36px;
        font-weight: 500;
        color: rgba(103, 130, 192, 1);
    }

    .refund_details_successful_title {
        font-size: 36px;
        font-weight: 500;
        color: rgba(61, 194, 143, 1);
    }

    .refund_details_status_subtitle {
        font-size: 26px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
        margin-left: 20px;
        margin-bottom: 5px;
    }

    .details_why {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        margin-top: 20px;
        padding: 40px 25px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .details_why_title {
        width: 652px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        display: block;
        padding-bottom: 28px;
        margin-bottom: 30px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color:rgba(232, 234, 237, 1) ;
    }

    .details_why_subtitle {
        font-size: 28px;
        font-weight: 500;
        color: rgba(103, 130, 192, 1);
        line-height: 42px;
        display: block;
        margin-top: 30px;
    }

    .details_history {
        width: 700px;
        background: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        margin-top: 20px;
        padding: 40px 25px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: space-between;
    }

    .details_history_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .details_history_icon {
        color: rgba(0, 0, 0, 0.1);
        font-size: 28px;
        font-weight: 400;
        line-height: 42px;
    }

    .details_product {
        width: 700px;
        /* height: 168px; */
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        margin-top: 20px;
        padding: 40px 25px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .details_product_title {
        width: 652px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        display: block;
        padding-bottom: 28px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgba(232, 234, 237, 1);
    }

    .details_product_content {
        margin-top: 24px;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20px;
    }

    .details_product_content_img {
        width: 120px;
        height: 120px;
        background: rgba(249, 249, 249, 1);
        border-radius: 4px;
        overflow: hidden;
    }

    .details_product_column {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20px;
        width: 500px;
    }

    .details_product_content_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .details_product_content_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
        margin-top: 10px;
    }

    .details_product_row {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 25px;
    }

    .details_product_row_title {
        width: 120px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
    }

    .details_product_row_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        margin-left: 20px;
        width: 500px;
    }

    .details_instructions_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .details_instructions_name {
        width: 652px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        display: block;
        padding-bottom: 28px;
        margin-bottom: 20px;
        border-bottom-color: rgba(232, 234, 237, 1);
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }

    .details_instructions_botton {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        margin-top: 25px;
    }

    .details_instructions_botton_left {
        width: 317px;
        height: 56px;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(212, 215, 220, 1);
    }

    .details_instructions_botton_leftTitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .details_instructions_botton_right {
        width: 317px;
        height: 56px;
        /* border: 1px solid rgba(235, 89, 79, 1); */
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details_instructions_botton_rightTitle {
        font-size: 24px;
        font-weight: 400;
        /* color: rgba(235, 89, 79, 1); */
    }

    .details_Refused_botton_left {
        width: 204px;
        height: 56px;
        border: 1px solid rgba(212, 215, 220, 1);
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details_Refused_botton_right {
        width: 204px;
        height: 56px;
        border: 1px solid rgba(235, 89, 79, 1);
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details_information {
        width: 660px;
        margin-left: 25px;
        background-color: white;
        border-radius: 16px;
        margin-top: 30px;
        padding: 20px;
        box-sizing: content-box;
    }

    .details_information_title {
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .details_information_title_current {
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.8;
    }

    .details_information_left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .details_information_line {
        width: 1px;
        height: 50px;
        border-left-color: rgba(0, 0, 0, 0.2);
        border-left-style: solid;
        border-left-width: 1px;
        box-sizing: border-box;
    }

    .details_information_line_current {
        width: 1px;
        height: 50px;
        border-left-color: rgba(237, 86, 75, 0.719);
        border-left-style: dashed;
        border-left-width: 1px;
        box-sizing: border-box;
    }

    .details_information_round {
        width: 50px;
        height: 50px;
		border-color:  rgba(0, 0, 0, 0.5);
		border-width: 1px;
		border-style: solid;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details_information_round_current {
        width: 50px;
        height: 50px;
        background-image: linear-gradient(to bottom, rgba(237, 86, 75, 0.719), rgb(247, 150, 120));
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details_information_icon {
		font-family: iconfont2;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.5);
    }

    .details_information_icon_current {
		font-family: iconfont2;
        font-size: 20px;
        color: white;
    }

    .details_information_content {
        display: flex;
        flex-direction: row;
        /* align-items: center; */
    }

    .details_information_text {
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        padding-top: 10px;
    }

    .files_item {
        width: 200px;
        height: 200px;
        overflow: hidden;
        border-radius: 6px;
        margin-right: 25px;
        margin-top: 20px;
    }

    .files_box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 677px;
        margin-left: 25px;
    }

    .details_product_files {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        margin-top: 20px;
        padding-top: 40px;
        padding-bottom: 40px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .details_product_title_files {
        width: 652px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        display: block;
        padding-bottom: 28px;
        border-bottom: 1px solid rgba(232, 234, 237, 1);
        margin-left: 25px;
        margin-right: 25px;
    }
    .navbar {
        width: 750px;
        height: 100px;
    }
    .text {
        font-size: 26px;
    }
    .image {
        width: 200px;
        height: 200px;
    }
</style>
